<template>
  <div class="rental-list">
    <template v-if="rentalList.length">
      <div class="rental-list-item" v-for="item in rentalList" :key="item.id">
        <template v-if="type === 'put'">
          <div class="top">
            <h2>{{ item.build_name }}</h2>
            <div>{{ item.time }}</div>
          </div>
          <div class="bottom">
            <div class="mr-64">
              地址：{{ item.province }}{{ item.city }}{{ item.district }}
            </div>
            <div class="mr-64">联系人：{{ item.user_name }}</div>
            <div class="mr-64">联系方式：{{ item.phone }}</div>
          </div></template
        >
        <template v-else>
          <div class="top">
            <h2>联系方式：{{ item.phone }}</h2>
            <div>{{ item.time }}</div>
          </div>
          <!-- <div class="bottom">
            <div class="mr-64">联系方式：{{ item.phone }}</div>
          </div> -->
        </template>
      </div>
    </template>
    <template v-else>
      <div class="flex flex-jc-c flex-ai-c" style="height: 300px">暂无数据</div>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    rentalList: {
      type: Array,
      default: () => [
        {
          id: 7,
          user_name: '张三',
          user_id: 7,
          build_name: '环球中心',
          phone: '18483692222',
          province: '四川',
          city: '成都',
          district: '高兴区',
          time: '2021-03-24 10:20:01',
          status: '已提交',
        },
      ],
    },
    cate_id: {
      type: String,
      default: null,
    },
    type: {
      type: String,
    },
  },
}
</script>

<style lang="less" scoped>
.rental-list-item {
  padding: 24px 12px;
  border-bottom: 1px solid #e4e4e4;
  .mr-64 {
    margin-right: 64px;
  }
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    h2 {
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    }
    div {
      font-size: 12px;
      color: #333333;
    }
  }
  .bottom {
    font-size: 14px;
    color: #333333;
    display: flex;
  }
}
</style>